<template>
	<view class="container">
		<view class="example">
			<!-- 自定义表单校验 -->
			<uni-forms ref="customForm" :rules="customRules" :modelValue="customFormData" label-position="top">
				<uni-forms-item label="课程标题" required name="title">
					<uni-easyinput v-model="customFormData.title" placeholder="请输入课程标题" />
				</uni-forms-item>
				<uni-forms-item label="课程内容" required name="content">
					<textarea class="textarea" placeholder="请输入课程内容" v-model="customFormData.content" name="content" />
				</uni-forms-item>
				<uni-forms-item label="上课班级" required name="className">
					<uni-data-checkbox v-model="customFormData.classId" @change="checkboxGroupChange"
						:localdata="hobbys" />
				</uni-forms-item>
				<uni-forms-item label="上课时间" required name="attendClassTime" labelWidth="180rpx">
					<text
						@click="defaultTimeChange">{{customFormData.attendClassTime == '' ? "请选择上课时间 >": customFormData.attendClassTime}}</text>
				</uni-forms-item>
				<uni-forms-item label="下课时间" required name="">
					<text
						@click="defaultTimeChange1">{{customFormData.quittingTime == '' ? "请选择下课时间 >": customFormData.quittingTime}}</text>
				</uni-forms-item>
			</uni-forms>

			
		</view>
		<u-picker :mode="mode" :defaultTime="defaultTime" v-model="show" :params="params" @confirm="confirm"
			:defaultSelector="defaultSelector" @change="pickerChange" :range-key="rangKey"
			@columnchange="columnchange"></u-picker>
		<u-picker :mode="mode2" :defaultTime="defaultTime" v-model="show2" :params="params" @confirm="confirm2"
			:defaultSelector="defaultSelector" @change="pickerChange" :range-key="rangKey"
			@columnchange="columnchange"></u-picker>
		<button class="buttonclass" size="mini" @click="saveJob('customForm')">保存</button>
	</view>
</template>

<script>
	import {
		getClassInfo,
		addWorkInfo
	} from '@/api/jz/class/class.js';
	import {addCourse} from '@/api/jz/course/api.js'
	import {
		getUser,
		getInfoId,
		getToken
	} from '@/utils/auth';
	import config from '@/config'
	export default {
		data() {
			return {
				mode: 'selector',
				mode2: 'time',
				rangKey: 'name',
				defaultSelector: [0],
				defaultTime: '2023-03-11 20:15:35',
				params: {
					year: true,
					month: true,
					day: true,
					hour: true,
					minute: true,
					second: true,
					province: true,
					city: true,
					area: true,
					timestamp: true
				},
				show: false,
				show2: false,
				readOnly: false,
				formats: {}, // 多选数据源
				hobbys: [], //多选班级
				teacherId: getInfoId(), //老师id
				userId: getUser(),
				isAnnounce: null, //0 保存 ； 1 保存并发布
				content: '',
				// 自定义表单数据
				customFormData: {
					title: '',
					classId: "",
					attendClassTime: '',
					quittingTime: '',
					teacherId:getInfoId()
				},
				// 自定义表单校验规则
				customRules: {
					title: {
						rules: [{
							required: true,
							errorMessage: '作业标题不能为空'
						}]
					},
					classArr: {
						rules: [{
								format: 'array'
							},
							{
								validateFunction: function(rule, value, data, callback) {
									if (value.length < 1) {
										callback('请至少勾选一个班级')
									}
									return true
								}
							}
						]
					}

				},
			}
		},
		onLoad: function() {},
		mounted() {
			this.getClassinfo()
		},
		methods: {
			pickerChange(e) {
				console.log(e);
			},
			confirm(e) {
				
				this.input = '';
				if (this.params.year) this.input += e.year;
				if (this.params.month) this.input += '-' + e.month;
				if (this.params.day) this.input += '-' + e.day;
				if (this.params.hour) this.input += ' ' + e.hour;
				if (this.params.minute) this.input += ':' + e.minute;
				if (this.params.second) this.input += ':' + e.second;
				this.customFormData.attendClassTime = this.input;
			},
			defaultTimeChange(e) {
				this.mode = 'time';
				this.show = true;
			},
			confirm2(e) {
				
				this.input = '';
				if (this.params.year) this.input += e.year;
				if (this.params.month) this.input += '-' + e.month;
				if (this.params.day) this.input += '-' + e.day;
				if (this.params.hour) this.input += ' ' + e.hour;
				if (this.params.minute) this.input += ':' + e.minute;
				if (this.params.second) this.input += ':' + e.second;
				this.customFormData.quittingTime = this.input;
			},
			defaultTimeChange1(e) {
				this.show2 = true;
			},
			checkboxGroupChange(val) {
				this.customFormData.classArr = val.detail.value
			},
			saveJob(ref) {
			  this.$refs[ref].validate().then(res => {
			    addCourse(this.customFormData).then((res) => {
			      if (res.code == 200) {
			        uni.showToast({
			          title: `保存成功`
			        })
			      }
			
			    }).catch((err) => {
			      console.error(err);
			    });
			  }).catch(err => {
			    console.log('err', err);
			  })
			},
			async getClassinfo() {
				await getClassInfo(this.userId).then((res) => {
					this.hobbys = []
					if (res.code == 200) {
						this.hobbys = res.data

						this.hobbys = this.hobbys.map(item => {
							return {
								...item,
								text: item.className,
								value: item.id
							}
						})

					}
				}).catch((err) => {
					console.error(err);
				});
			},

		},
	}
</script>
<style scoped>
	page {
		background-color: #f8f8f8;
	}

	.example {
		background-color: #ffffff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 10px;
		border: none;
		box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.04),
			0px 2px 6px 0px rgba(0, 0, 0, 0.04), 0px 0px 1px 0px rgba(0, 0, 0, 0.04);
	}

	.buttonclass {
		width: 100%;
		padding: 10rpx;
		background: #1b6cfc;
		border-radius: 65px;
		color: #fff;
	}

	uni-textarea {
		width: 100%;
		padding: 9px 2%;
		font-size: 14px;
	}

	.textarea {
		display: flex;
		box-sizing: border-box;
		flex-direction: row;
		align-items: center;
		border: 1px solid #dcdfe6;
		border-radius: 4px;
	}
</style>